import { Flex, Tooltip, Typography } from "antd"
import { useSelector } from "react-redux"

import { FormatMessageProps, useLocale } from "@/locales"
import { AppState } from "@/stores"

export const DEVICE_TYPE = [
	{ description: "PC" },
	{ description: "H5" },
	{ description: "IOS" },
	{ description: "Android" },
	{ description: "Other" },
	{ description: "Robot" }
]

export const columnsLoginInfomation = (formatMessage: FormatMessageProps) => {
	const { allDictLists } = useSelector((state: AppState) => state.config)
	const { newFormat } = useLocale()
	const optionDeviceType1 = allDictLists["login_device_type1"]
		? allDictLists["login_device_type1"].map((item: { label: string; value: any }) => {
				return {
					label: newFormat(item.label),
					value: item.value
				}
		  })
		: []

	return [
		{
			dataIndex: "LoginInTime",
			title: formatMessage({ id: "member.login_info_tab_member.log_in_time" }),
			render: (_text: any, record: any) => <p>{record.loginTime}</p>,
			width: 150,
			align: "center",
			key: "login_in_time"
		},
		{
			dataIndex: "state ",
			title: formatMessage({ id: "member.login_info_tab_member.state" }),
			render: (_text: any, record: any) => (
				<p className={record.loginStatus == 0 ? "text-red" : "text-black"}>
					{record.loginStatus == 0
						? formatMessage({ id: "member.login_info_tab_member.fail" })
						: formatMessage({ id: "member.login_info_tab_member.success" })}
				</p>
			),
			width: 60,
			align: "center",
			key: "state"
		},
		{
			dataIndex: "IPAddressRiskControlLevel",
			title: () => {
				return (
					<div>
						<Typography>{formatMessage({ id: "member.login_info_tab_member.ip_address" })}</Typography>
						<Typography>{formatMessage({ id: "member.login_info_tab_member.risk_control_level" })}</Typography>
					</div>
				)
			},
			width: 100,
			render: (_text: any, record: any) => (
				<Tooltip
					placement="top"
					title={record.loginIp + `${formatMessage({ id: "member.login_info_tab_member.risk_control_level" })}：-`}
				>
					<Flex vertical style={{ minWidth: "70px" }}>
						<Typography.Text ellipsis>{record.loginIp}</Typography.Text>
						<Typography.Text style={{ color: "red" }} ellipsis>
							{formatMessage({ id: "member.login_info_tab_member.risk_control_level" }) + "：-"}
						</Typography.Text>
					</Flex>
				</Tooltip>
			),
			align: "center",
			key: "ip_address_risk_control_level"
		},
		{
			dataIndex: "IPLocation",
			title: formatMessage({ id: "member.login_info_tab_member.ip_location" }),
			width: 100,
			render: (_text: any, record: any) => (
				<Tooltip placement="top" title={record.ipAttribution}>
					<Typography.Text style={{ maxWidth: 70 }} ellipsis>
						{record.ipAttribution}
					</Typography.Text>
				</Tooltip>
			),
			align: "center",
			key: "ip_location"
		},
		{
			dataIndex: "loginAddress",
			title: () => (
				<Typography style={{ textAlign: "center", alignItems: "center", display: "flex", justifyContent: "center" }}>
					{formatMessage({ id: "member.login_info_tab_member.login_address" })}
				</Typography>
			),
			width: 180,
			align: "center",
			render: (_text: any, record: any) => (
				<Tooltip placement="top" title={record.loginReference}>
					<Typography.Text style={{ minWidth: "180px", textAlign: "center" }} ellipsis>
						{record.loginReference ? record.loginReference : "-"}
					</Typography.Text>
				</Tooltip>
			),

			key: "login_address"
		},

		{
			dataIndex: "LoginIntoTheTerminal",
			title: formatMessage({ id: "member.login_info_tab_member.login_in_to_the_terminal" }),
			render: (_text: any, record: any) => (
				<p>
					{optionDeviceType1.filter((item: { label: any; value: string }) => item.value == record.deviceType)[0]?.label || "-"}{" "}
				</p>
			),
			width: 80,
			align: "center",
			key: "login_in_to_the_terminal"
		},
		{
			dataIndex: "device_number",
			title: () => {
				return (
					<div>
						<Typography>{formatMessage({ id: "member.login_info_tab_member.device_number" })}</Typography>
						<Typography>{formatMessage({ id: "member.login_info_tab_member.risk_control_level" })}</Typography>
					</div>
				)
			},
			width: 200,
			render: (_text: any, record: any) => (
				<Tooltip placement="top" title={record.deviceNo + " 风控层级：-"}>
					<Flex vertical>
						<Typography.Text ellipsis>{record.deviceNo}</Typography.Text>
						<Typography.Text ellipsis style={{ color: "red" }}>
							风控层级：-
						</Typography.Text>
					</Flex>
				</Tooltip>
			),
			align: "center",
			key: "device_number"
		},
		{
			dataIndex: "deviceVersion",
			title: () => (
				<Typography style={{ textAlign: "center", alignItems: "center", display: "flex", justifyContent: "center" }}>
					{formatMessage({ id: "member.login_info_tab_member.device_version" })}
				</Typography>
			),
			width: 160,
			align: "center",
			render: (_text: any, record: any) => (
				<Tooltip placement="top" title={record.browseContent}>
					<Typography.Text style={{ maxWidth: "160px" }} ellipsis>
						{record.browseContent}
					</Typography.Text>
				</Tooltip>
			),

			key: "device_version"
		},
		{
			dataIndex: "location",
			title: formatMessage({ id: "member.login_info_tab_member.gps_location_information" }),
			render: (_text: any, record: any) => (
				<Tooltip placement="top" title={record.location}>
					<Typography.Text style={{ maxWidth: "160px" }} ellipsis>
						{record.location || "-"}
					</Typography.Text>
				</Tooltip>
			),
			width: 160,
			align: "center",
			key: "location"
		}
	]
}
